<template>
  <div class="banner">
    <div class="circle">
      <img :src="hotProduct.val.cover" alt="">
    </div>
  </div>
  <div :class="productType">
    <div class="product">
      <div class="product-name">{{ hotProduct.val.title }}</div>
      <div class="points">
        <span class="points-num">{{ hotProduct.val.integration }}</span>
        <span>积分</span>
      </div>
    </div>
    <div class="take">
      <div class="left">
        <span class="take-count">已领取{{ hotProduct.val.amount }}份</span>
        <span class="watch-count"><img src="../assets/20230712-103428.png" alt=""><span>{{ hotProduct.val.clicks
        }}</span></span>
      </div>
      <div class="right" @click="router.push('/thankview')">立刻领取</div>
    </div>
  </div>
  <div class="intro">
    <img src="../assets/产品简介字.png" alt="" class="title">
    <div class="detail">
      <img src="../assets/IMG_6959.png" alt="" class="detail-img">
      <img src="../assets/IMG_6960.png" alt="" class="detail-img">
      <img src="../assets/IMG_6964.png" alt="" class="detail-img">
    </div>
  </div>
  <div class="tips"></div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { onBeforeMount, onMounted } from 'vue';
import axios from "axios";
import { useRoute } from 'vue-router';
import MobileDetect from "mobile-detect";
import router from '@/router';
let productType = ref('newProduct')
onMounted(() => {
  window.scrollTo(0, 0)
})
let hotProduct = reactive({
  val: {
    cover: '',
    title: '',
    integration: 0,
    brief: '',
    pid: 1,
    images: [],
    clicks: 0,
    amount: 0
  }
})
const route = useRoute()
productType = route.query.cato as any
let md = new MobileDetect(navigator.userAgent);
console.log(md);
console.log(md.mobile()); // 'Sony'
console.log(md.phone()); // 'Sony'
console.log(md.userAgent()); // 'Safari'
console.log(md.os()); // 'AndroidOS' 系统
console.log(md.version("Webkit")); // 534.3
axios.get(`/api/product/details/${route.query.pid}/${md.mobile() ? md.mobile() : md.phone() ? md.phone() : '其他'}`).then((res) => {
  hotProduct.val = res.data.product
  console.log(res)
}).catch((e) => { console.log(e) })

const tag = '../assets/hot.png'
const productName = ref('')
const clickNum = ref(0)
const date = ref('')
</script>

<style scoped lang="scss">
.banner {
  display: flex;
  justify-content: center;
  margin-bottom: 48px;

  .circle {
    display: flex;
    justify-content: center;
    flex: 1;
    background-image: url(../assets/椭圆形.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    img{
      max-width: 350px;
      max-height: 450px;
    }
  }
}
.hotProduct{
  display: flex;
  flex-wrap: wrap;
  margin: 48px auto 28px auto;
  padding: 100px 36px 56px 53px;
  box-sizing: border-box;
  width: 674px;
  height: 286px;
  background-image: url(../assets/hot.png);
  background-repeat: no-repeat;
  background-size: contain;
  flex-wrap: wrap;
  // padding: 0 10px;
  justify-content: space-between;

  .product {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    .product-name {
      color: rgb(0, 0, 0);
      font-family: PingFang SC;
      font-size: 32px;
      text-align: left;
      max-width: 300px;
      height: 100px;
      overflow: hidden;
      text-overflow: clip;
    }

    .points {
      color: rgb(147, 32, 255);
      font-family: FZLTZCHK;
      font-size: 26.4px;
      text-align: left;

      .points-num {
        font-size: 42.3px;
      }
    }
  }

  .take {
    display: flex;
    height: 45px;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    width: 100%;

    .left {
      height: 100%;

      .take-count {
        opacity: 0.5;
        color: rgb(0, 0, 0);
        font-family: PingFang SC;
        font-size: 24px;
        margin-right: 4px;
      }

      .watch-count {
        text-align: center;
        opacity: 0.5;
        height: 100%;

        span {
          color: rgb(147, 32, 255);
          font-family: FZLTZCHK;
          font-size: 24px;
          text-align: left;
        }

        img {
          width: 28px;
          height: 28px;
          background: rgb(147, 32, 255);
        }
      }
    }

    .right {
      background-color: rgb(255, 172, 20);
      border-radius: 30.399999618530273px;
      height: 45px;
      
      width: 147px;
      text-align: center;
      color: rgb(255, 255, 255);
      font-family: FZLTZCHK;
      margin-top: 4px;
      margin-right: 8px;
      margin-left: auto;
      font-size: 24px;
    }
  }
}
.brandProduct {
  display: flex;
  flex-wrap: wrap;
  margin: 48px auto 28px auto;
  padding: 100px 36px 56px 53px;
  box-sizing: border-box;
  width: 674px;
  height: 286px;
  background-image: url(../assets/brand.png);
  background-repeat: no-repeat;
  background-size: contain;
  flex-wrap: wrap;
  // padding: 0 10px;
  justify-content: space-between;

  .product {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    .product-name {
      color: rgb(0, 0, 0);
      font-family: PingFang SC;
      font-size: 32px;
      text-align: left;
      max-width: 300px;
      height: 100px;
      overflow: hidden;
      text-overflow: clip;
    }

    .points {
      color: rgb(147, 32, 255);
      font-family: FZLTZCHK;
      font-size: 26.4px;
      text-align: left;

      .points-num {
        font-size: 42.3px;
      }
    }
  }

  .take {
    display: flex;
    height: 45px;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    width: 100%;

    .left {
      height: 100%;

      .take-count {
        opacity: 0.5;
        color: rgb(0, 0, 0);
        font-family: PingFang SC;
        font-size: 24px;
        margin-right: 4px;
      }

      .watch-count {
        text-align: center;
        opacity: 0.5;
        height: 100%;

        span {
          color: rgb(147, 32, 255);
          font-family: FZLTZCHK;
          font-size: 24px;
          text-align: left;
        }

        img {
          width: 28px;
          height: 28px;
          background: rgb(147, 32, 255);
        }
      }
    }

    .right {
      background-color: rgb(255, 172, 20);
      border-radius: 30.399999618530273px;
      height: 45px;
      line-height: 45px;
      width: 147px;
      text-align: center;
      color: rgb(255, 255, 255);
      font-family: FZLTZCHK;
      margin-top: 4px;
      margin-right: 8px;
      margin-left: auto;
      font-size: 24px;
    }
  }
}
.newProduct {
  display: flex;
  flex-wrap: wrap;
  margin: 48px auto 28px auto;
  padding: 100px 36px 56px 53px;
  box-sizing: border-box;
  width: 674px;
  height: 286px;
  background-image: url(../assets/new.png);
  background-repeat: no-repeat;
  background-size: contain;
  flex-wrap: wrap;
  // padding: 0 10px;
  justify-content: space-between;

  .product {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    .product-name {
      color: rgb(0, 0, 0);
      font-family: PingFang SC;
      font-size: 32px;
      text-align: left;
      max-width: 300px;
      height: 100px;
      overflow: hidden;
      text-overflow: clip;
    }

    .points {
      color: rgb(147, 32, 255);
      font-family: FZLTZCHK;
      font-size: 26.4px;
      text-align: left;

      .points-num {
        font-size: 42.3px;
      }
    }
  }

  .take {
    display: flex;
    height: 45px;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    width: 100%;

    .left {
      height: 100%;

      .take-count {
        opacity: 0.5;
        color: rgb(0, 0, 0);
        font-family: PingFang SC;
        font-size: 24px;
        margin-right: 4px;
      }

      .watch-count {
        text-align: center;
        opacity: 0.5;
        height: 100%;

        span {
          color: rgb(147, 32, 255);
          font-family: FZLTZCHK;
          font-size: 24px;
          text-align: left;
        }

        img {
          width: 28px;
          height: 28px;
          background: rgb(147, 32, 255);
        }
      }
    }

    .right {
      background-color: rgb(255, 172, 20);
      border-radius: 30.399999618530273px;
      height: 45px;
      line-height: 45px;
      width: 147px;
      text-align: center;
      color: rgb(255, 255, 255);
      font-family: FZLTZCHK;
      margin-top: 4px;
      margin-right: 8px;
      margin-left: auto;
      font-size: 24px;
    }
  }
}

.intro {
  width: 674px;
  margin: 0 auto 39px auto;
  background-image: url(../assets/产品2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .title {
    margin: 40px 15.93px 29.13px 17px;
    width: 641.07px;
    height: 52.86px;

  }

  .detail {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
}

.tips {
  width: 674px;
  height: 261px;
  margin: 0 auto;
  background-image: url(../assets/温馨1.png);
  background-size: contain;
}

.detail-img {
  width: 634.63px;
  margin-bottom: 38px;
}</style>